/*
 * @Author: liangliang
 * @Date: 2023-05-18 15:40:29
 * @LastEditors: yusha
 * @LastEditTime: 2023-08-25 10:14:43
 * @Description: 线上bug登记
 */

import React, { useState } from 'react';
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { Button, Form, Input, Row, Col, Card, Modal ,Spin } from 'antd';
import { getTestPlan } from '@/config/request/testTools';


import './../module/index.scss';

type SizeType = Parameters<typeof Form>[0]['size'];
const CustomerApi: React.FC = () => {
    const formTailLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 14, offset: 4 },
    };
    const [form] = Form.useForm();

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const [loading, setLoading] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [jsonObj, setJsonStr] = useState({});

    const showModal = (obj) => {
        setJsonStr(obj);
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    //  等待接口请求,注册
    const onCheck1 = async () => {
        // console.log(products, 'products');
        setLoading(true);

        const re = form.getFieldsValue();

        // console.log("************", re);

        const param = {
            cookies: re.cookies,
        };

        const res = await getTestPlan(param);
        if(res.data != null){
            setLoading(false)
        }
        console.log(res);
        showModal(res.data);
    };



    return (
        <div className="bg-white p-2.5">

            {
                loading ? (
                <Spin tip="Loading" size="large">
                    <div className="content" />
                </Spin>
                ) : (
                <div>
                    <Row gutter={16} style={{ marginBottom: '20px' }}>
                    <Col span={12}>
                        <Card title="获取云效测试任务数据" bordered={false}>
                            <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" form={form}>
                                <Form.Item label="云效cookies：" name={'cookies'}>
                                    <Input />
                                </Form.Item>

                                <Form.Item {...formTailLayout}>
                                    <Button type="primary" style={{ width: '100%' }} onClick={onCheck1}>
                                        提交
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Card>
                    </Col>
                </Row>

                <Modal title="执行结果：" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <SyntaxHighlighter language="javascript" style={solarizedlight}>
                        {/* {code} */}
                        {JSON.stringify(jsonObj, null, 4)}
                    </SyntaxHighlighter>
                </Modal>
                </div>
                )
            }
        </div>
    );
};


export default CustomerApi;

